﻿@model SmartParking.Web.Models.ReservationModel
@{
    ViewBag.Title = "Reservación";
    var modelAsJSON = new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
}

@section HeaderScripts {
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /> 
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>

    <script type='text/javascript'>
        $(document).ready(function () {
            window.MVJSON = @modelAsJSON;
        });

        $(document).on("click", "#cmdReserve", null, function() {
            var url = "@Url.Action("Reserve")";
            var url2 = "@Url.Action("Reservations")";
            doMobileReserve(window.MVJSON, url, url2);
        });

        $(document).on("change", "#ddlParking", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectParking(window.MVJSON, url);
            $("#ddlParkingZone").empty();
            $("#ddlStartHour").empty();
            $("#ddlEndHour").empty();
        });

        $(document).on("change", "#ddlParkingZone", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectParkingZone(window.MVJSON, url);            
            $("#parkingInfo").trigger("collapse");
            $("#ddlStartHour").empty();
            $("#ddlEndHour").empty();
            $("#reservationInfo").trigger("expand");
            $("#tboxDate").focus();
        });

        $(document).on("change", "#ddlStartHour", null, function() {
            var url = "@Url.Action("RefreshModel")";
            doSelectStartHour(window.MVJSON, url);
        });

        $(document).on("change", "#ddlEndHour", null, function() {
            $("#tboxCarPlate").focus();
        });
    </script>
}
<div data-role="collapsible-set" data-theme="b" data-content-theme="e">
    <div id="parkingInfo" data-role="collapsible" data-collapsed="false">
        <h3>
            Información del Parqueo
        </h3>
        <div data-role="fieldcontain">
            <label for="ddlParking">
                @Html.DisplayNameFor(model => model.ParkingId)
            </label>
            @Html.DropDownList("ddlParking", Model.Parkings,
                new { data_native_menu = "false" })
        </div>
        <div data-role="fieldcontain">
            <label for="ddlParkingZone">
                @Html.DisplayNameFor(model => model.ParkingZoneId)
            </label>
            @Html.DropDownList("ddlParkingZone", Model.ParkingZones,
                new { data_native_menu = "false" })
        </div>
    </div>
    <div id="reservationInfo" data-role="collapsible" data-collapsed="true">
        <h3>
            Información de Reservación
        </h3>
        <div data-role="fieldcontain">
            <label for="lbPriceHourAndComission">
                Precio/Hora
            </label>
            <input id="lbPriceHourAndComission" name="lbPriceHourAndComission" type="text" value="[$PHXXX] + [$CXXX] comisión" style="visibility: hidden;" readonly="readonly"/>
        </div>
        <div data-role="fieldcontain">
            <label for="tboxDate">
                @Html.DisplayNameFor(model => model.Date)
            </label>
            <input id="tboxDate" name="tboxDate" type="date" value=@Model.Date
                class="text-box single-line" data-val="true" data-val-required="The Fecha field is required."
                data-role="datebox" data-options='{"mode": "calbox", "overrideDateFormat": "%d/%m/%Y"}' readonly="readonly"/>
        </div>
        <div data-role="fieldcontain">
            <label for="ddlStartHour">
                @Html.DisplayNameFor(model => model.StartHour)
            </label>
            @Html.DropDownList("ddlStartHour",
                new SelectList(Model.OpenHours, Model.StartHour),
                new { data_native_menu = "false" })
        </div>
        <div data-role="fieldcontain">
            <label for="ddlEndHour">
                @Html.DisplayNameFor(model => model.EndHour)
            </label>
            @Html.DropDownList("ddlEndHour",
                new SelectList(Model.CloseHours, Model.EndHour),
                new { data_native_menu = "false" })
        </div>
        <div data-role="fieldcontain">
            <label for="tboxCarPlate">
                @Html.DisplayNameFor(model => model.CarPlate)
            </label>
            @Html.EditorFor(model => model.CarPlate, "", "tboxCarPlate")
        </div>
    </div>
</div>
<input id="cmdReserve" type="submit" data-icon="arrow-r" data-iconpos="right" value="Reservar">
